<template>
  <el-menu
    class="aside-menu"
    :collapse-transition="false"
    :default-active="$route.path"
  >
    <template v-for="item in accountRouters">
      <router-link
        v-if="!item.children"
        :to="{ name: item.name }"
        :key="item.name"
      >
        <el-menu-item :index="item.path">
          <i :class="'el-icon-' + item.meta.icon"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
      </router-link>
      <el-submenu
        v-if="item.children"
        :key="item.name"
        :index="item.path"
      >
        <template slot="title">
          <i :class="'el-icon-' + item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <template v-for="it in item.children">
          <router-link
            class="aside-menu-link"
            :key="it.name"
            v-if="!it.meta.hidden"
            :to="{ name: it.name }"
          >
            <el-menu-item :index="it.path">{{ it.meta.title }}</el-menu-item>
          </router-link>
        </template>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
import routers from "../../router/routres.js";
export default {
  data() {
    return {
      accountRouters: [...routers],
    };
  },
};
</script>

<style lang="scss">
.el-menu{
    background-color: #344762 !important;
}

.aside-menu {
  height: 100%;
}
.aside-menu:not(.el-menu--collapse) {
  width: 260px;
}
.aside-menu .el-submenu__title {
  width: 260px;
   color: #fff;
}
.aside-menu .el-menu-item{
    color: #fff;
}
.aside-menu-link {
  display: block;
  overflow: hidden;


}
.el-submenu .el-menu {
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  -moz-column-count: 2;
  -moz-column-gap: 20px;
}
.el-menu-item.is-active {
  color: #fff !important;
  background: #00cc8b !important;
}
// 移上效果
.aside-menu .el-menu-item:hover{
    background: #00cc8b;
}
.aside-menu .el-submenu__title:hover {
   background: #00cc8b;
}
</style>
